import React, { useEffect, useState } from 'react'
import { View, Image, TouchableOpacity } from 'react-native'

const RenderHTMLImage = ({ uri, onPress, imagesMaxWidth }) => {
  const [ imageSize, setImageSize ] = useState({})

  useEffect(() => {
    Image.getSize(uri, (width, height) => {
      setImageSize({
        width,
        height,
        aspectRatio: Number((width / height).toFixed(2)),
      })
    })
  }, [])

  return (
    <View
      style={{
        width: imageSize.width > imagesMaxWidth
          ? imagesMaxWidth
          : imageSize.width,
      }}
    >
      <TouchableOpacity onPress={() => onPress(uri)}>
        <Image
          source={{ uri }}
          style={{
            width: imageSize.width > imagesMaxWidth
              ? imagesMaxWidth
              : imageSize.width,
            aspectRatio: imageSize.aspectRatio,
            resizeMode: 'cover',
          }}
        />
      </TouchableOpacity>
    </View>
  )
}

export default RenderHTMLImage